<template>
  <div class="home-container">
    <!-- 第一部分：欢迎区域和地图 -->
    <div v-if="!showMainContent" class="welcome-page">
      <div class="welcome-section">
        <h1 class="welcome-title">欢迎使用酒店管理系统</h1>
        <div class="welcome-subtitle">便捷、高效的酒店预订与管理平台</div>
        <el-button type="primary" size="large" class="enter-button" @click="enterMainContent">立即进入</el-button>
      </div>

      <!-- 酒店地图展示 -->
      <div class="map-section">
        <a-map-component :hotels="hotelList" height="100%" />
      </div>
    </div>

    <!-- 第二部分：功能区域 -->
    <div v-else class="main-content">
      <div class="user-section" v-if="userInfoStore.userInfo">
        <h2 class="section-title">{{ getWelcomeMessage() }}</h2>
        <div class="user-actions">
          <el-button 
            v-for="(action, index) in getUserActions()" 
            :key="index" 
            type="primary" 
            @click="navigateTo(action.path)"
          >
            {{ action.label }}
          </el-button>
        </div>
      </div>

      <el-row :gutter="20" class="feature-cards">
        <el-col :span="8" v-for="(feature, index) in features" :key="index">
          <el-card class="feature-card" shadow="hover">
            <div class="feature-icon">
              <el-icon :size="50" :color="feature.color"><component :is="feature.icon" /></el-icon>
            </div>
            <h3 class="feature-title">{{ feature.title }}</h3>
            <div class="feature-desc">{{ feature.description }}</div>
            <el-button 
              type="primary" 
              class="feature-button" 
              @click="navigateTo(feature.path)"
              v-if="shouldShowFeature(feature.role)"
            >
              {{ feature.buttonText }}
            </el-button>
          </el-card>
        </el-col>
      </el-row>

      <div class="back-button-container">
        <el-button type="info" @click="showMainContent = false">返回首页</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserInfoStore } from '@/stores/userInfo'
import { getHotelList } from '@/api/hotel'
import { ElMessage } from 'element-plus'
import AMapComponent from '@/components/AMapComponent.vue'
import { 
  House, 
  Suitcase, 
  Document, 
  ChatLineRound, 
  User, 
  SetUp,
  Star
} from '@element-plus/icons-vue'

const router = useRouter()
const userInfoStore = useUserInfoStore()
const hotelList = ref([])
const loading = ref(false)
const showMainContent = ref(false)

// 进入主内容区域
const enterMainContent = () => {
  showMainContent.value = true
}

// 获取所有酒店数据
const fetchHotels = async () => {
  loading.value = true
  try {
    const res = await getHotelList({ pageIndex: 1, pageSize: 1000 })
    const result = res.data
    
    if (result && result.code === 200) {
      // 过滤出有经纬度的酒店
      const hotels = Array.isArray(result.data) 
        ? result.data.filter(hotel => hotel.longitude && hotel.latitude)
        : []
      
      // 确保经纬度是数值类型
      hotelList.value = hotels.map(hotel => ({
        ...hotel,
        longitude: parseFloat(hotel.longitude),
        latitude: parseFloat(hotel.latitude)
      }))
      
      console.log('获取到的酒店数据:', hotelList.value.length, '条记录')
    } else {
      console.error('获取酒店列表失败:', result)
      ElMessage.error(result?.msg || '获取酒店列表失败')
    }
  } catch (error) {
    console.error('获取酒店列表错误:', error)
    ElMessage.error('网络错误，获取酒店列表失败')
  } finally {
    loading.value = false
  }
}

// 系统特点
const features = [
  {
    icon: 'Suitcase',
    title: '酒店浏览',
    description: '探索全球各地的优质酒店，查看详细信息和客户评价，选择最适合您的住宿。',
    path: '/hotel',
    buttonText: '浏览酒店',
    color: '#409EFF',
    role: 'all'
  },
  {
    icon: 'Document',
    title: '订单管理',
    description: '便捷地创建、查看和管理您的酒店预订订单，轻松掌控您的行程安排。',
    path: '/order',
    buttonText: '我的订单',
    color: '#67C23A',
    role: 'all'
  },
  {
    icon: 'ChatLineRound',
    title: '用户评价',
    description: '分享您的住宿体验，查看其他客人的真实评价，帮助您做出更好的决策。',
    path: '/review',
    buttonText: '查看评价',
    color: '#E6A23C',
    role: 'all'
  },
  {
    icon: 'Suitcase',
    title: '酒店管理',
    description: '酒店商家可以管理自己的酒店信息，包括房型、价格和可用性等。',
    path: '/my-hotel',
    buttonText: '管理我的酒店',
    color: '#F56C6C',
    role: 'hotel_owner'
  },
  {
    icon: 'User',
    title: '用户管理',
    description: '管理员可以管理系统用户，查看用户信息，分配角色和权限。',
    path: '/user',
    buttonText: '管理用户',
    color: '#909399',
    role: 'admin'
  },
  {
    icon: 'SetUp',
    title: '系统管理',
    description: '管理员可以配置系统参数，监控系统运行状态，确保系统高效稳定运行。',
    path: '/admin-hotel',
    buttonText: '系统设置',
    color: '#9C27B0',
    role: 'admin'
  }
]

// 判断是否应该显示特定角色的功能卡片
const shouldShowFeature = (role: string): boolean => {
  if (role === 'all') return true
  if (role === 'admin' && userInfoStore.isAdmin()) return true
  if (role === 'hotel_owner' && (userInfoStore.isHotelOwner() || userInfoStore.isAdmin())) return true
  return false
}

// 获取欢迎信息
const getWelcomeMessage = (): string => {
  if (!userInfoStore.userInfo) return '欢迎光临'
  
  const userId = userInfoStore.userInfo.user.userId
  
  if (userInfoStore.isAdmin()) {
    return `欢迎管理员 ${userId}，您可以管理整个系统`
  } else if (userInfoStore.isHotelOwner()) {
    return `欢迎酒店商家 ${userId}，您可以管理您的酒店信息`
  } else {
    return `欢迎 ${userId}，祝您使用愉快`
  }
}

// 获取用户操作按钮
const getUserActions = () => {
  const actions = [
    { label: '个人中心', path: '/profile' }
  ]
  
  if (userInfoStore.isAdmin()) {
    actions.push({ label: '用户管理', path: '/user' })
    actions.push({ label: '酒店管理', path: '/admin-hotel' })
  } else if (userInfoStore.isHotelOwner()) {
    actions.push({ label: '我的酒店', path: '/my-hotel' })
  }
  
  actions.push({ label: '我的订单', path: '/order' })
  
  return actions
}

// 导航到指定路径
const navigateTo = (path: string) => {
  router.push(path)
}

// 组件挂载时加载酒店数据
onMounted(() => {
  fetchHotels()
})
</script>

<style scoped>
.home-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.welcome-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.welcome-section {
  text-align: center;
  padding: 40px 0;
  background: linear-gradient(135deg, #f9f6f2 0%, #bfa084 100%);
  border-radius: 4px;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.welcome-title {
  font-size: 36px;
  color: #6e4f32;
  margin-bottom: 10px;
}

.welcome-subtitle {
  font-size: 18px;
  color: #8d6748;
  margin-bottom: 30px;
}

.enter-button {
  padding: 12px 30px;
  font-size: 18px;
  background-color: #8d6748 !important;
  border-color: #8d6748 !important;
}

.enter-button:hover {
  background-color: #6e4f32 !important;
  border-color: #6e4f32 !important;
}

.map-section {
  flex: 1;
  position: relative;
  min-height: 400px;
  overflow: hidden;
}

.section-title {
  text-align: center;
  margin-bottom: 20px;
  color: #6e4f32;
  font-size: 24px;
}

.main-content {
  height: 100%;
  overflow: auto;
}

.feature-cards {
  margin-bottom: 40px;
}

.feature-card {
  height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  transition: transform 0.3s;
  margin-bottom: 20px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(141, 103, 72, 0.2);
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-title {
  font-size: 20px;
  margin-bottom: 10px;
  color: #6e4f32;
}

.feature-desc {
  color: #8d6748;
  flex-grow: 1;
  margin-bottom: 20px;
}

.feature-button {
  width: 100%;
}

.user-section {
  background-color: #f9f6f2;
  padding: 30px;
  border-radius: 4px;
  text-align: center;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.back-button-container {
  text-align: center;
  margin-bottom: 40px;
}
</style> 